<template>
    <div>
        <!-- 顶部按钮层 -->
        <div style="margin:20px">
            <!-- <el-button type="primary" @click="dialogFormVisible = true">发布交通信息</el-button> -->
        </div>
        <!-- 卡片数据展示层 -->
        <div>
            <el-card v-for="item in cardList" :key="item.id" class="box-card">
                <div slot="header" class="clearfix">
                    <span>交通信息</span>
                    <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="delInfo(item.id)">删除信息</el-button> -->
                </div>
                <div class="text item">
                    <p>{{ item.title }}</p>
                    <br />
                    <br />
                    <p style="padding:5px">
                        <el-tag>学院：{{ item.name }}</el-tag>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <el-tag>时间：{{ item.time }}</el-tag>
                    </p>
                    <br />
                    <br />
                    <p>{{ item.content }}</p>
                </div>
            </el-card>
        </div>
        <!-- 对话框弹出层 -->
        <div>
            <el-dialog title="添加交通信息" :visible.sync="dialogFormVisible">
                <el-form :model="traffic">
                    <el-form-item label="标题" :label-width="formLabelWidth">
                        <el-input v-model="traffic.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学院信息" :label-width="formLabelWidth">
                        <el-select v-model="traffic.collegeId" placeholder="请选择学院">
                            <el-option v-for="item in collegeList" :label="item.name" :value="item.id" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="formLabelWidth">
                        <textarea v-model="traffic.content"></textarea>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addTraffic">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            cardList: [],
            traffic: {
                collegeId: '',
                title: '',
                content: ''
            },
            dialogFormVisible: false,
            // 全部学院信息
            collegeList: [],
            formLabelWidth: '100px'
        };
    },
    methods: {
        async trafficList() {
            const res = await this.getJSON(`/traffic/findlist`);
            this.cardList = res.data;
            console.log(this.cardList);
        },
        async addTraffic() {
            this.postJSON(`/traffic/public`, this.traffic);

            this.dialogFormVisible = false;
            // 添加完成进行重载数据
            this.trafficList();
            this.$message.success('发布成功');
        },
        // 加载全部学院信息
        async getCollegeList() {
            const res = await this.getJSON(`/college/findall`);
            this.collegeList = res.data.records;
        },
        async delInfo(id) {
            await this.deleteJSON(`/traffic/deletebyid?id=${id}`);
            this.$message.success('删除成功');
            this.trafficList();
        }
    },
    created() {
        this.trafficList();
        this.getCollegeList();
    }
};
</script>
<style scoped></style>
